<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";

.user {
  width: 10rem;
  height: 100vh;
  background-color: orange;
  overflow: hidden;

  .user-header {
    width: 10rem;
    height: 22.5vh;
    background-color: pink;

    img {
      width: 10rem;
      height: 22.5vh;
      object-fit: cover;
    }
  }

  .user-info {
    width: 10rem;
    height: 77.5vh;
    background-color: #161622;
    position: relative;
    color: $color-white;

    .user-avatar {
      width: 2.1333rem;
      height: 2.1333rem;
      margin: 0 auto;
      border-radius: 50%;
      overflow: hidden;
      background: #161622;
      padding: .1333rem;
      position: absolute;
      top: -.4rem;
      left: .5rem;

      img {
        width: 2.1333rem;
        height: 2.1333rem;
        object-fit: cover;
        border-radius: 50%;
      }
    }

    .user-name {
      padding-top: 2rem;


      h6 {
        font-size: .5333rem;
        margin-left: .5rem;
        font-weight: 700;
      }

      p {
        font-size: .4267rem;
        margin-left: .5rem;
        font-weight: 400;
      }
    }

    .user-signature {
      width: 9.5rem;
      margin: 0 auto;
      border-top: 1px solid #222222;
      margin-top: .2rem;
      padding-top: .2rem;

      p {
        font-size: .3733rem;
        font-weight: 400;
        color: #8b8c96;
      }

      span {
        margin-top: .2rem;
        width: 1.3333rem;
        height: .2667rem;
        display: inline-block;
        background-color: #43333fb3;
        padding: .1333rem .2133rem;
        border-radius: .1333rem;
        font-size: .2667rem;
        text-align: center;
        display: flex;
        align-items: center;
        color: #8b8c96;

        i {
          color: #da6969;
          font-size: .2667rem;
        }
      }
    }

    .user-follow {
      width: 5.3333rem;
      height: .4rem;
      margin-left: 0.25rem;
      margin-top: .2rem;
      @include flex-space-between-center;

      .user-follow-item {
        height: .3733rem;
        display: flex;
        font-size: .3733rem;
      }
    }

    .user-dynamic {
      width: 10rem;
      height: 1.12rem;
      display: flex;
      margin-top: .2667rem;
      font-size: .4267rem;
      position: relative;

      .user-dynamic-item {
        width: 3.3333rem;
        height: 1.12rem;
        @include flex-center;
      }

      .user-follow-line {
        bottom: 0;
        left: 0;
        width: 3.3333rem;
        height: .0533rem;
        background-color: #face15;
        position: absolute;
        top: 1.12rem;
        left: 0;
        transition: all 1s;
      }
    }
  }
}
</style>
<template>
  <div class="user">
    <!-- 头部背景图 -->
    <div class="user-box" style="transform: translateY(-22.5vh);">
      <div class="user-header">
        <img src="http://43.138.15.137/assets/img/281578538336_.pic_hd.e816ad71.jpg" alt="">
      </div>
      <!-- 个人信息 -->
      <div class="user-info">
        <div class="user-avatar">
          <img src="" alt="">
        </div>
        <div class="user-name">
          <h6>用户昵称</h6>
          <p>抖音号：@用户昵称</p>
        </div>
        <!-- 请设置个性签名 -->
        <div class="user-signature">
          <p>请设置个性签名</p>
          <span><i class="iconfont icon-nv"></i>21岁</span>
        </div>
        <!-- 点赞关注粉丝 -->
        <div class="user-follow">
          <div class="user-follow-item">
            <p>0</p>
            <span>获赞</span>
          </div>
          <div class="user-follow-item">
            <p>3</p>
            <span>关注</span>
          </div>
          <div class="user-follow-item">
            <p>1</p>
            <span>粉丝</span>
          </div>

        </div>
        <!-- 作品动态喜欢 -->
        <div class="user-dynamic">
          <div class="user-dynamic-item">
            <span>作品</span>
            <p>0</p>
          </div>
          <div class="user-dynamic-item">
            <span>动态</span>
            <p>0</p>
          </div>
          <div class="user-dynamic-item">
            <span>喜欢</span>
            <p>9</p>
          </div>
          <!-- 移动条 -->
          <div class="user-follow-line"></div>
        </div>
        <div class="user-content">
          <UserContentGrid />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import UserContentGrid from '@/components/common/UserContentGrid.vue'
</script>